<template>
    <div id="app">
        <h-header></h-header>
        <div>
            <transition>
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
            </transition>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
        <h-footer></h-footer>
        <!--<div class="float-box">-->
        <!--<div class="float-wrap">-->
        <!--<div class="float-top">-->
        <!--<img class="logo-ico" src="../public/images/logo-ico.png" alt="">-->
        <!--<span>升学服务，点我资询</span>-->
        <!--</div>-->
        <!--<p class="float-btn">立即资询</p>-->
        <!--<div class="close-box">-->
        <!--<i class="close-icon"></i>-->
        <!--</div>-->
        <!--</div>-->

        <!--</div>-->
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import Footer from "@/components/Footer.vue";
    import Header from "@/components/Header.vue";

    export default {
        components: {"h-footer": Footer, "h-header": Header},
        name: "app",
        data() {
            return {
                isPhone: false
            };
        },
        mounted() {
            let os = navigator.userAgent
            if (os.includes('iPhone') || os.includes('Android')) {
                this.isPhone = true
            } else {
                this.isPhone = false
            }
            this.$store.commit(types.IS_PHONE, this.isPhone)
        },

    };
</script>

<style lang="scss">
    .float-box {
        position: fixed;
        right: 34px;
        bottom: 56px;
        width: 276px;
        height: 92px;
        padding: 23px 20px 10px 13px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 3px 6px rgba(5, 23, 56, 0.11);
        font-size: 15px;
        color: #353A47;
        .float-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            .close-box {
                position: absolute;
                right: -10px;
                top: -18px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 6px;
                .close-icon {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    background: url("../public/images/close-ico.png");
                    background-size: 100% 100%;
                }
            }

        }
        .logo-ico {
            width: 32px;
            height: 32px;
            margin-right: 14px;
        }
        .float-btn {
            margin-top: 10px;
            text-align: right;
            font-size: 13px;
            color: #1E80FF;
        }
    }

    @media screen and (min-width: 960px) and (max-width: 1200px) {
        .header-wrap,
        .footer-wrap {
            width: 900px !important;
        }
    }

    @media screen and (min-width: 750px) and (max-width: 960px) {
        .header-wrap {
            width: 375px !important;
        }
    }

    @media screen and (max-width: 750px) {
        .h-footer {
            margin-top: 92px !important;
            .footer-wrap {
                flex-direction: column-reverse;
                .items {
                    margin-top: 40px;
                    .wx-ico,
                    .wx-text {
                        display: none;
                    }
                    .item {
                        width: 140px !important;
                        margin-right: 30px !important;;
                    }
                    .qr-code {
                        top: 0 !important;
                        height: 160px !important;
                        img {
                            width: 120px !important;
                            height: 120px !important;
                            margin-top: 10px !important;
                        }
                    }
                }
            }
        }
    }

    .el-carousel__arrow {
        display: none !important;
    }

    .el-carousel__button {
        width: 6px !important;
        height: 6px !important;
        border-radius: 100%;
    }

    .el-carousel__indicators--horizontal {
        bottom: 16px !important;
    }

    .el-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        margin-top: 20px;
        background: #E2E7F1;
        .btn-prev span,
        .btn-prev,
        .el-pager .number,
        .el-pager .el-icon,
        .btn-next span,
        .btn-next {
            background: transparent !important;
            font-size: 14px !important;
        }
        .el-pager {
            display: flex;
            align-items: center;
            .number {
                width: 32px;
                height: 32px;
                line-height: 32px;
                min-width: 32px;
                padding: 0;
                margin: 0 4px;
            }
            .active {
                height: 32px;
                background: #4D555D !important;
                border-radius: 100%;
                color: #fff !important;

            }
        }

    }
</style>
